<template>
    <el-row style="width:100%">
        <!-- <el-col :span="3">
            <div class="xls_box flexbox flexcolumn flexbetween">
                <div class="number_data flexbox flexcolumn flexcenter flexjust vm_bg01">
                    <img src="@/assets/img/vd_iocn01.png" alt="" class="vd_icon">
                    <div class="count_title">消耗</div>
                    <div class="count_number">{{countData.stat_cost?countData.stat_cost:"0"}}</div>
                </div>
                <div class="number_data flexbox flexcolumn flexcenter flexjust vm_bg02">
                    <img src="@/assets/img/vd_iocn02.png" alt="" class="vd_icon">
                    <div class="count_title">GMV</div>
                    <div class="count_number">{{countData.pay_order_amount?countData.pay_order_amount:"0"}}</div>
                </div>
                <div class="number_data flexbox flexcolumn flexcenter flexjust vm_bg03">
                    <img src="@/assets/img/vd_iocn03.png" alt="" class="vd_icon">
                    <div class="count_title">支付ROI</div>
                    <div class="count_number">{{countData.pay_order_roi?countData.pay_order_roi:"0"}}</div>
                </div>
                <div class="number_data flexbox flexcolumn flexcenter flexjust vm_bg04">
                    <img src="@/assets/img/vd_iocn04.png" alt="" class="vd_icon">
                    <div class="count_title">转化成本</div>
                    <div class="count_number">{{countData.convert_cost?countData.convert_cost:"0"}}</div>
                </div>
            </div>
        </el-col> -->
        <el-col :span="18">
            <div class="mid_box flexbox flexcolumn">
                <div class="vd_box_top" ref="vd_width" :style="{'height':max_height}">
                    <video ref="videos" class="width-video" :src="src" controls="controls" autoplay type="video/mp4" muted @ended="playNextVideo()">
                        您的浏览器不支持 video 标签。
                    </video>
                    <div class="countNumer" v-if="isShow">
                        <el-progress width="110" type="circle" color="#4475FF" :percentage="count*10" :format="format"></el-progress>
                    </div>
                </div>
                <div class="vd_box_bot flex flexbox flexcenter">
                    <div class="vd-xh-count">{{countData.stat_cost?countData.stat_cost:"0"}}</div>
                    <div class="flex flexbox flexcolumn flexjust">
                        <div class="vd_title">{{countData.material_name}}</div>
                        <div class="vd_info">
                            <span class="vd_mg">ID：{{countData.material_id}}</span>
                            <span class="vd_mg">序列:{{countData.index+1}}/{{countData.count}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="xls_box flexbox flexcolumn flexbetween">
                <div class="number_data flexbox flexcolumn flexcenter" v-for="(item,index) in list" :key="index">
                    <div class="nd-head flexbox flexcenter flexbetween">
                        <div>{{index+1}}</div>
                        <div>{{item.stat_cost}}</div>
                    </div>
                    <div class="nd-mid">
                        {{item.material_name}}
                    </div>
                    <div class="nd-fot flexbox flexcenter">
                        <div class="nd-name flex">编导：{{item.director_name}}</div>
                        <div class="nd-name flex">拍摄：{{item.photographer_name}}</div>
                        <div class="nd-name flex">剪辑：{{item.editor_name}}</div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
export default {
    props: ["src", "count", "isShow", "countData","list"],
    components: {},
    name: "",
    data() {
        return {
            max_height: null,
        };
    },
    created() {},
    mounted() {
        var that = this;
        let vd_width = that.$refs.vd_width.clientWidth;
        let vd_height = vd_width / 1.777;
        that.max_height = vd_height + "px";
        window.onresize = () => {
            return (() => {
                let vd_width = that.$refs.vd_width.clientWidth;
                let vd_height = vd_width / 1.777;
                that.max_height = vd_height + "px";
            })();
        };
    },
    watch: {},
    beforeDestroy() {},
    methods: {
        getData() {
            this.$nextTick(() => {
                const videos = this.$refs.videos;
                videos.play();
            });
        },
        playNextVideo() {
            this.$emit("playNextVideo");
        },

        format(p) {
            return p / 10 + "s";
        },
    },
};
</script>


<style scoped>
.xls_box {
    height: 100%;
    background: #191e28;
    box-shadow: 0px 5px 6px 0px rgba(20, 21, 22, 0.55);
    box-sizing: border-box;
    padding: 0.16rem;
    border-radius: 0.24rem;
}
.mid_box {
    height: 100%;
    margin: 0 0.2rem;
}
.el-col {
    height: 100%;
}
.number_data {
    height: 18.5%;
    border-radius: 0.32rem;
    border: 1px solid #454f63;
    background: rgba(185, 179, 255, 0.1);
    box-sizing: border-box;
    padding: 0.2rem;
}
.nd-head {
    width: 100%;
    font-size: 0.22rem;
    color: #fff;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-family: D-DIN;
    font-weight: 500;
}
.nd-mid {
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 0.18rem;
    color: rgba(255, 255, 255, 0.80);
    line-height: 0.3rem;
    margin-top: 0.12rem;
}
.nd-fot{
    width: 100%;
    margin-top: 0.12rem;
    color: rgba(255, 255, 255, 0.80);
    font-size: 0.18rem;
}
.vd_icon {
    width: 0.48rem;
    height: 0.48rem;
}
.count_title {
    font-size: 0.2rem;
    line-height: 0.36rem;
    color: #fff;
    opacity: 0.5;
    margin: 0.12rem 0;
}
.count_number {
    font-size: 0.36rem;
    color: #fff;
    line-height: 0.46rem;
    font-family: D-DIN;
    font-weight: 700;
}
.vd_box_top {
    border-radius: 0.32rem;
    overflow: hidden;
    position: relative;
}
.width-video {
    width: 100%;
    height: 100%;
}
.vd_box_bot {
    padding: 0 0.4rem;
    margin-top: 0.2rem;
    border-radius: 0.32rem;
    border: 1px solid #454f63;
    background: rgba(185, 179, 255, 0.1);
    box-shadow: 0px 5px 5px 0px rgba(20, 21, 22, 0.8);
}
.vd_title {
    font-size: 0.22rem;
    color: #fff;
    line-height: 0.44rem;
}
.vd_info {
    font-size: 0.18rem;
    color: #fff;
    opacity: 0.5;
}
.vd_mg {
    margin-right: 0.24rem;
}
.countNumer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
}
/deep/ .el-progress__text {
    color: #fff;
    font-size: 0.3rem !important;
}
/deep/ .countNumer .el-progress {
    position: absolute;
    top: 30px;
    right: 30px;
}
.vm_bg01 {
    background: url(../../../assets/img/dmax_icon1.png) no-repeat;
    background-size: 100% 100%;
    /* background-attachment: scroll; */
}
.vm_bg02 {
    background: url(../../../assets/img/dmax_icon2.png) no-repeat;
    background-size: 100% 100%;
}
.vm_bg03 {
    background: url(../../../assets/img/dmax_icon3.png) no-repeat;
    background-size: 100% 100%;
}
.vm_bg04 {
    background: url(../../../assets/img/dmax_icon4.png) no-repeat;
    background-size: 100% 100%;
}
.vm_bg05 {
    background: url(../../../assets/img/dmax_icon5.png) no-repeat;
    background-size: 100% 100%;
}
.vm_bg06 {
    background: url(../../../assets/img/dmax_icon6.png) no-repeat;
    background-size: 100% 100%;
}
.vm_bg07 {
    background: url(../../../assets/img/dmax_icon7.png) no-repeat;
    background-size: 100% 100%;
}
.vm_bg08 {
    background: url(../../../assets/img/dmax_icon8.png) no-repeat;
    background-size: 100% 100%;
}
.vd-xh-count {
    font-size: 0.56rem;
    color: #fff;
    font-family: D-DIN;
    font-weight: 700;
    color: #fff;
    width: 2.5rem;
    position: relative;
    margin-right: 0.5rem;
}
.vd-xh-count::after {
    content: "";
    height: 0.8rem;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}
</style>


